<template>
  <div class="renyuan">
    <!-- 面包絮 -->
<el-breadcrumb separator="/">
  <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>人事管理 </el-breadcrumb-item>
  <el-breadcrumb-item>人员管理</el-breadcrumb-item>
</el-breadcrumb>
    <h4>人员管理</h4>
    <el-button type="primary" @click="$router.push('/index/xinzeng')"
      >新增</el-button
    >
    <el-button @click="Exportexcel()">导出</el-button>
    <el-table :data="tableData" stripe style="width: 100%" id="out-table" v-loading="loading"
    element-loading-text="Loading...">
      <el-table-column prop="date" label="序号" width="80" type="index" />
      <el-table-column prop="name" label="姓名"  />
      <el-table-column prop="bumen" label="部门" />
      <el-table-column prop="gangwei" label="岗位" />
      <el-table-column prop="shoujihao" label="手机号" width="120" />
      <el-table-column prop="gonghao" label="工号" width="120"/>
      <el-table-column prop="zhengjianbiaohao" label="证件号" width="170" />
      <el-table-column prop="gongzuoxingzhi" label="工作性质" />
      <el-table-column prop="zhuangtai" label="状态" />
      <el-table-column prop="ruzhiriqi" label="入职日期" />
      <el-table-column prop="address" label="操作" width="200">
        <template #default="scope">
          <el-button type="primary" @click="bianji(scope.row)">编辑</el-button>
          <el-button type="danger" @click="delrenyuan(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 编辑 -->
    <el-drawer v-model="drawer" title="I am the title" :with-header="false">
      <h4>新增人员</h4>
      <div class="int">
          <el-form :model="ruleForm" 
          label-width="120px" 
          :rules="rules"
          ref="ruleFormRef"
          status-icon
          >
              <el-form-item label="姓名" prop="name">
                <el-input v-model="ruleForm.name" width="200px"  placeholder="请输入姓名" :disabled="true"/>
              </el-form-item>
              <el-form-item label="性别" prop="resource">
                  <el-radio-group v-model="ruleForm.resource" :disabled="true">
                    <el-radio label="男" />
                    <el-radio label="女" />
                  </el-radio-group>
                </el-form-item> 
              <el-form-item label="手机号码"  prop="shoujihao">
                  <el-input v-model="ruleForm.shoujihao"  placeholder="请输入手机号" :disabled="true"/>
                </el-form-item>
                <el-form-item label="工号"  prop="gonghao">
                  <el-input v-model="ruleForm.gonghao" placeholder="请输入工号" :disabled="true"/>
                </el-form-item>
                <el-form-item label="证件号码"  prop="zhengjianbiaohao">
                  <el-input v-model="ruleForm.zhengjianbiaohao"  placeholder="请输入证件号码" :disabled="true"/>
                </el-form-item>
              <el-form-item label="岗位"  prop="gangwei">
                <el-select v-model="ruleForm.gangwei" placeholder="请选择岗位">
                  <el-option label="项目经理" value="项目经理" />
                  <el-option label="科室主任" value="科室主任" />
                  <el-option label="副总裁" value="副总裁" />
                </el-select>
              </el-form-item>
              <el-form-item label="部门"  prop="bumen">
                  <el-select v-model="ruleForm.bumen" placeholder="请选择部门">
                    <el-option label="项目部" value="项目部" />
                    <el-option label="产品部" value="产品部" />
                    <el-option label="人力资源部" value="人力资源部" />
                    <el-option label="财务部" value="财务部" />
                    <el-option label="行政部" value="行政部" />
  
                  </el-select>
                </el-form-item>
                <el-form-item label="职务"  prop="zhiwu">
                  <el-select v-model="ruleForm.zhiwu"  placeholder="请选择职务">
                    <el-option label="财务人员" value="财务人员" />
                    <el-option label="作业员" value="作业员" />
                    <el-option label="招聘专员" value="招聘专员" />
                    <el-option label="行政主任" value="行政主任" />
                  </el-select>
                </el-form-item>
                <el-form-item label="工作性质"  prop="gongzuoxingzhi">
                  <el-select v-model="ruleForm.gongzuoxingzhi" placeholder="请选择工作性质">
                    <el-option label="正式" value="正式" />
                    <el-option label="试用" value="试用" />
                    <el-option label="实习" value="实习" />
                    <el-option label="兼职" value="兼职" />
                  </el-select>
                </el-form-item>
                <el-form-item label="试用期"  prop="shiyongqi">
                  <el-select v-model="ruleForm.shiyongqi"  placeholder="请选择" class="sel">
                      <el-option label="试用" value="试用" />
                      <el-option label="实习" value="实习" />
                  </el-select>
                  <el-select v-model="ruleForm.yueshu"  placeholder="个月" class="sel1">
                      <el-option label="一个月" value="一个月" />
                      <el-option label="三个月" value="三个月" />
                    </el-select>
                </el-form-item>
                <el-form-item label="人员状态"  prop="zhuangtai">
                  <el-select v-model="ruleForm.zhuangtai" placeholder="请选择状态">
                    <el-option label="在职" value="在职" />
                    <el-option label="离职" value="离职" />
                  </el-select>
                </el-form-item>
              <el-form-item label="入职时间"  prop="ruzhiriqi">
                  <el-date-picker
                  v-model="ruleForm.ruzhiriqi"
                  type="date"
                  placeholder="请选择时间"
                  format="YYYY/MM/DD"
                  value-format="YYYY-MM-DD"
                  style="width:450px"
                  :disabled="true"
                />
              </el-form-item>                
              <el-form-item>
                <el-button @click="drawer = false">返回</el-button>
                <el-button type="primary" @click="patchrenyuan()">保存</el-button>
              </el-form-item>
            </el-form>
      </div>
    </el-drawer>
  </div>
</template>

<script setup>
import * as XLSX from 'xlsx'
import fs from 'file-saver'
import { ref, onMounted } from "vue";
var loading=ref(true)
var tableData = ref([]);
var drawer = ref(false)
import * as request from "@/api/biao/biao";
var ruleFormRef=ref()
var ruleForm=ref({
    name:'',
    bumen:'',
    gangwei:'',
    shoujihao:'',
    gonghao:'',
    zhengjianbiaohao:'',
    gongzuoxingzhi:'',
    zhuangtai:'',
    ruzhiriqi:'',
    shiyongqi:'',
    yueshu:'',
    zhiwu:'',
    resource:''
})
//数据校验
var rules=ref({
    name: [
    { required: true, message: '请输入姓名', trigger: 'blur' }, 
  ],
  bumen: [
    { required: true, message: '请选择部门', trigger: 'blur' }, 
  ],
  gangwei: [
    { required: true, message: '请选择岗位', trigger: 'blur' }, 
  ],
  shoujihao: [
    { required: true, message: '请输入手机号码', trigger: 'blur' }, 
  ],
  gonghao: [
    { required: true, message: '请输入工号', trigger: 'blur' }, 
  ],
  zhengjianbiaohao: [
    { required: true, message: '请输入证件号码', trigger: 'blur' }, 
  ],
  gongzuoxingzhi: [
    { required: true, message: '请选择工作性质', trigger: 'blur' }, 
  ],
  zhuangtai: [
    { required: true, message: '请选择状态', trigger: 'blur' }, 
  ],
  ruzhiriqi: [
    { required: true, message: '请选择入职时间', trigger: 'blur' }, 
  ],
})
//初次渲染
onMounted(async () => {
  var res = await request.renyuan_login();
  console.log(res.data)
  loading.value=false
  tableData.value = res.data;
});
//删除人员
var delrenyuan = async (id) => {
  var res = await request.shanchu_login(id);
  ElNotification({
  title: "通知",
  message: "删除人员成功",
  type: "success",
  duration: 2000,
 });
  var i =tableData.value.findIndex(item=>item.id==id)
  if(i!=-1)tableData.value.splice(i,1)
  console.log(res);
};
//编辑人员
var bianji = (admin) => {
  drawer.value = true
  ruleForm.value = admin
  console.log(ruleForm.value);
}
//修改人员
var patchrenyuan=async()=>{
  var res=await request.bianji_login(ruleForm.value)
  ElNotification({
  title: "通知",
  message: "编辑人员成功",
  type: "success",
  duration: 2000,
 });
 drawer.value = false
  console.log(res);
}
//导出
var Exportexcel = () => {
    excelExport(document.querySelector('#out-table'), 'renyuanmingdan')
}
// 自动分析dom元素导出excel
var excelExport = (table, filename) => {
    // workbook,
    const wb = XLSX.utils.table_to_book(table)
    //  console.log(wb);
    /* Export to file (start a download) */
    const defaultCellStyle = {
        font: { name: 'Verdana', sz: 13, color: 'FF00FF88' },
        fill: { fgColor: { rgb: 'FFFFAA00' } },
    }
    const wopts = {
        bookType: 'xlsx',
        bookSST: false,
        type: 'binary',
        cellStyle: true,
        defaultCellStyle: defaultCellStyle,
        showGridLines: false,
    }
    const wbout = XLSX.write(wb, wopts)
    const blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' })
    fs.saveAs(blob, filename + '.xlsx')
}
var s2ab = (s) => {
    if (typeof ArrayBuffer !== 'undefined') {
        const buf = new ArrayBuffer(s.length);
        const view = new Uint8Array(buf);
        for (let i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
        return buf;
    } else {
        const buf = new Array(s.length);
        for (let i = 0; i !== s.length; ++i) buf[i] = s.charCodeAt(i) & 0xff;
        return buf;
    }
}
</script>

<style scoped>
.renyuan{
  width: 100%;
}
.renyuan h4 {
  display: inline-block;
  width: 100%;
  padding-bottom: 10px;
  border-bottom: 1px solid;
  margin-bottom: 15px;
}
.sel{
  width: 100px;
}
.sel1{
  width: 150px;
  margin-left: 15px;
}
.el-breadcrumb{
  margin-bottom: 20px;
}
.el-table{
  margin-top:20px;
}
</style>